/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-06 11:55:34
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-08-24 08:31:19
 * @FilePath: \cxl-h5\src\utils\htmlPdf.ts
 */
import html2canvas from 'html2canvas'

export const createDownloadImage = async (id: string, fileName?: string) => {
    const element = document.querySelector('#' + id) as HTMLElement
    const opts = {
        scale: 2, // 缩放比例，提高生成图片清晰度，不推荐太高
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 检测每张图片已经加载完成
        logging: false, // 日志开关，发布的时候记得改成 false
        height: element.scrollHeight,
        windowHeight: element.scrollHeight,
        timeout: 2000,
        backgroundColor: '#f2f6f8'
    }
    //获取canvas
    const canvas = await html2canvas(element, opts)
    //获取宽度
    const contentWidth = canvas.width
    //获取高度
    const contentHeight = canvas.height
    //获取屏幕高度
    const windowHeight = window.innerHeight
    //一个屏幕高度放1
    const height = windowHeight / 1
    //绘制水印部分
    // const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
    // ctx?.save()
    // ctx.font = '24px Arial'
    // ctx.textBaseline = 'top'
    // ctx.textAlign = 'center'
    // ctx.fillStyle = 'rgba(0,0,0,0.15)'
    // for (let x = 0; x < 2; x++) {
    //     for (let y = 1; y <= Math.fround(contentHeight / height); y++) {
    //         ctx?.save()
    //         // this.ctx?.beginPath()
    //         ctx?.setTransform()
    //         ctx?.translate(x * (contentWidth / 2) + contentWidth / 4, y * height - height / 2)
    //         ctx?.rotate((Math.PI / 180) * -30)
    //         ctx?.fillText('长三角车生活', 0, 0)
    //         // this.ctx?.closePath()
    //         ctx?.restore()
    //     }
    // }
    // ctx?.restore()

    const pageData = canvas.toDataURL('image/jpeg', 0.5)
    return pageData
}
